/* ======================================== */
/* CHANGE BY VISHAL - Contact Modal Image Column START */
/* ======================================== */

.contact-modal-image {
    position: relative;
    height: 100%;
    min-height: 100%;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
    margin-top: 0 !important;
    padding: 0 !important;
}

.contact-modal-img {
    width: 100%;
    height: 100%;
    min-height: 450px !important;
    object-fit: cover;
    display: block;
}

/* Modal-content ko flex banaya taaki dono column equal height le */
#contactUsModal .modal-content {
    overflow: hidden;
}

#contactUsModal .modal-body .row {
    min-height: 450px;
    margin: 0 !important;
}

#contactUsModal .modal-body .col-md-7 {
    display: flex;
    align-items: center;
    background: #f0f7e8 !important;  /* Light Green */
    border-radius: 0 0 16px 0 !important;
}

/* Image Column - White Background */
#contactUsModal .modal-body .col-md-5 {
    background: #ffffff !important;
}

/* Mobile pe image chhup jayegi (d-none d-md-block already HTML mein hai), 
   form full width le lega automatically */

/* CHANGE BY VISHAL - Contact Modal Image Column END */
/* ======================================== */

/* ======================================== */
/* CHANGE BY VISHAL - Floating Label Effect START */
/* ======================================== */

#contactUsModal .form-group-float {
    position: relative;
}

/* Input/Textarea ko upar se extra padding do label ke liye space banane ke liye */
#contactUsModal .form-group-float .form-control {
    padding-top: 20px !important;
    padding-bottom: 8px !important;
}

/* Label ki default (bada) position — input ke andar center mein */
#contactUsModal .form-group-float .form-label {
    position: absolute;
    left: 16px;
    top: 16px;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(0,0,0,0.4) !important;
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
}

/* Textarea ka label thoda upar se start hota hai (kyunki textarea bada hai) */
#contactUsModal .form-group-float textarea ~ .form-label {
    top: 16px;
}

/* Jab focus ho YA field mein content ho -> label chota hoke upar chala jaye */
#contactUsModal .form-group-float .form-control:focus ~ .form-label,
#contactUsModal .form-group-float .form-control:not(:placeholder-shown) ~ .form-label {
    top: -9px;
    left: 12px;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #539E10 !important;
    background: #f0f7e8;
    padding: 0 6px;
    letter-spacing: 0.3px;
}

/* CHANGE BY VISHAL - Floating Label Effect END */
/* ======================================== */

/* ======================================== */
/* CHANGE BY VISHAL - Exact Form Spacing (Flexbox based) START */
/* ======================================== */

/* Har row ke beech EXACT gap - koi Bootstrap gutter involve nahi */
#contactUsModal .cf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}

/* last row (Comment wala) ke baad thoda zyada gap Submit button se pehle */
#contactUsModal .cf-row:last-of-type {
    margin-bottom: 20px;
}

/* har column 50% width le, gap flex se already handle ho raha hai */
#contactUsModal .cf-col {
    flex: 1 1 calc(50% - 9px);
    min-width: 0;
}

/* form-group-float ka apna koi extra margin na ho - sirf cf-row control kare */
#contactUsModal .form-group-float {
    margin: 0 !important;
    width: 100%;
}

/* mobile par columns stack ho jayein, single column */
@media (max-width: 575px) {
    #contactUsModal .cf-col {
        flex: 1 1 100%;
    }
}

/* CHANGE BY VISHAL - Exact Form Spacing END */
/* ======================================== */

/* CHANGE BY VISHAL - Custom Modal Width */
#contactUsModal .modal-dialog {
    max-width: 1100px !important;  /* Apni desired width */
    width: 95% !important;
}

#contactUsModal .modal-content {
    border-radius: 16px !important;
    overflow: hidden !important;
}